<!--------------------------------
 - @Author: Your Name
 - @LastEditor: Your Name
 - @LastEditTime: 2025-11-07
 - Copyright © 2025 Your Name
 --------------------------------->

<template>
  <CommonPage>
    <NCard title="基础设施管理" segmented>
      <NGrid :cols="2" :x-gap="12" :y-gap="12">
        <NGridItem>
          <NCard
            title="S3对象存储管理"
            :bordered="false"
            embedded
            style="cursor: pointer; transition: all 0.3s;"
            hoverable
            @click="goToS3Storage"
          >
            <template #header-extra>
              <NIcon size="24" color="#18a058">
                <i class="i-carbon:cloud-storage" />
              </NIcon>
            </template>
            <p>管理S3对象存储配置，支持多业务类型路由</p>
          </NCard>
        </NGridItem>

        <NGridItem>
          <NCard
            title="OAuth认证配置"
            :bordered="false"
            embedded
            style="cursor: pointer; transition: all 0.3s;"
            hoverable
            @click="goToOauth"
          >
            <template #header-extra>
              <NIcon size="24" color="#2080f0">
                <i class="i-carbon:authentication" />
              </NIcon>
            </template>
            <p>配置第三方OAuth认证，支持自定义提供商</p>
          </NCard>
        </NGridItem>

        <NGridItem>
          <NCard
            title="审计日志管理"
            :bordered="false"
            embedded
            style="cursor: pointer; transition: all 0.3s;"
            hoverable
            @click="goToAuditLog"
          >
            <template #header-extra>
              <NIcon size="24" color="#d03050">
                <i class="i-carbon:audit" />
              </NIcon>
            </template>
            <p>查看操作日志和安全事件，管理告警规则</p>
          </NCard>
        </NGridItem>

        <NGridItem>
          <NCard
            title="开放API管理"
            :bordered="false"
            embedded
            style="cursor: pointer; transition: all 0.3s;"
            hoverable
            @click="goToApiManagement"
          >
            <template #header-extra>
              <NIcon size="24" color="#f0a020">
                <i class="i-carbon:api" />
              </NIcon>
            </template>
            <p>管理API密钥，配置访问控制和使用统计</p>
          </NCard>
        </NGridItem>
      </NGrid>
    </NCard>
  </CommonPage>
</template>

<script setup>
import { NCard, NGrid, NGridItem, NIcon } from 'naive-ui'
import { useRouter } from 'vue-router'

defineOptions({ name: 'Infra' })

const router = useRouter()

function goToS3Storage() {
  router.push('/infra/s3-storage')
}

function goToOauth() {
  router.push('/infra/oauth')
}

function goToAuditLog() {
  router.push('/infra/audit-log')
}

function goToApiManagement() {
  router.push('/infra/api-management')
}
</script>
